{layout name="layout" /}

<style>
    .layui-tab-title{
        height:auto;
    }
    .layui-tab-title li.list-active{
        border:5px solid pink;
    }
    
    .layui-tab-title li{
        display: block;
        width:200px;
        height:130px;
        border:5px solid gainsboro;
        margin:5px;
        padding:5px;
    }
    .list-image-item:hover,.layui-tab-title li:hover{
        border:5px solid red;
        cursor:pointer;
    }
    .layui-tab-title .layui-this::after{
        border:0px solid red;
    }
    .list-image-title{
        position:absolute;
        font-size:15px;
        line-height:28px;
        width:100%;
        bottom:0px;
        /* white-space:nowrap; */
        color:#fff;
        text-overflow:ellipsis;
        overflow:hidden;
        background:rgba(0,0,0,0.7);
    }
    .list-image-item{
        width:200px;
        height:130px;
        border:5px solid gainsboro;
        margin:5px;
        padding:5px;
    }
</style>

<div class="">
    <div class="layui-fluid">
        <div class="layui-form" action="/admin/wechatArticle/update"  lay-filter="layuiadmin-form-useradmin" id="layuiadmin-form-useradmin">
            <div class="layui-tab">
                <div class="layui-col-sm3">
                    <ul class="layui-tab-title" id="tabs">
                    {foreach $model as $key=>$article } 
                        <li {if($key==0)} class="layui-this" {/if}>
                            <div style="width:100%;height:100%;">
                                <a style="width:100%;height:100%;display:block;">
                                    <img style="width:100%;height:100%;" src="{$article->assets->path|default=''}" data-image="cover"/>
                                    <div class="list-image-title" data-image="title">{$article->title}</div>
                                </a>
                                <!-- <div style="position:absolute;top:0px;right:0px;">
                                    <a data-click="remove" class="layui-icon layui-icon-delete" style="font-size:30px;color:red;"></a>
                                </div> -->
                            </div>
                        </li>
                    {/foreach}
                    </ul>
                    <!-- <div class="list-image-item" id="newArticle">
                        <a style="display:block;line-height:120px;text-align:center;">
                            <i class="layui-icon layui-icon-add-1" style="font-size:50px;color:#1E9FFF;"></i>
                        </a>
                    </div> -->
                </div>
                <div class="layui-col-sm9 layui-tab-content layui-bg-white" id="tab-content">
                {foreach $model as $key=>$article }
                    <div class="layui-tab-item {if($key==0)}layui-show{/if}" data-tab-content="item">
                        <div class="layui-form-item">
                            <label class="layui-form-label">标题</label>
                            <div class="layui-input-block">
                                <input type="text" value="{$article->title}" data-input="title" name="title[]" lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
                            </div>
                        </div>                      
                        <div class="layui-form-item">
                            <label class="layui-form-label">作者</label>
                            <div class="layui-input-block">
                                <input type="text" value="{$article->author}" name="author[]" lay-verify="required" placeholder="请输入作者" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">封面</label>
                            <div class="layui-input-inline">
                                <button type="button" class="layui-btn" data-news="openNews">选择封面</button>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">使用链接</label>
                            <div class="layui-input-block">
                                <?php
                                    $enabled=$article->useUrl??0;
                                ?>
                                <input type="radio" name="useUrl[]" value="1" title="启用" {$enabled ==1 ?"checked":""}>
                                <input type="radio" name="useUrl[]" value="0" title="禁用" {$enabled ==0 ?"checked":""}>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">链接地址</label>
                            <div class="layui-input-block">
                                <input type="text" value="{$article->returnUrl}" name="returnUrl[]" lay-verify="url" placeholder="请输入链接地址" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">图文链接</label>
                            <div class="layui-input-block">
                                <input type="text" value="{$article->url}" lay-verify="url" placeholder="请输入链接地址" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">摘要</label>
                            <div class="layui-input-block">
                                <textarea name="digest[]" required lay-verify="required" placeholder="请输入摘要内容" class="layui-textarea">{$article->digest}</textarea>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">正文</label>
                            <div class="layui-input-block">
                                <textarea lay-verify="content" data-area="content" name="content[]" style="display: none;">{$article->content}</textarea>
                            </div>
                        </div>
                        <input type="hidden" name="id[]" value="{$article->id}">
                        <input type="hidden" lay-verify="cover" data-input="cover" name="image[]" value="{$article->assets->path|default=''}">
                        <input type="hidden" name="newsId[]" value="{$article->newsId}">
                        <input type="hidden" name="imageAssetId[]" data-input="assetId" value="{$article->imageAssetId}">
                        <input type="hidden" name="mediaImage[]" data-input="mediaImage" value="{$article->mediaImage}">
                    </div>
                {/foreach}
                </div>
            </div>
            <div class="layui-form-item layui-hide">
                <input type="button" lay-submit lay-filter="zbc-wechat-submit" id="zbc-wechat-submit" value="确认">
            </div>
        </div>
    </div>
</div>


<script>
    layui.config({
        base: '/static/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index','layedit','form'], function () {
        var $ = layui.$
            , layer = layui.layer
            , form = layui.form
            , layedit=layui.layedit;

        var editId=layedit.build("content",{
            uploadImage:{
                url:"/admin/upload/wechatFile?type=article",
                type:"post"
            }
        });

        function activeListLast(){
            $("#tabs li:last").click();
        }
        function isAddList(){
            return $("#tabs li").length < 8;
        }

        $("#zbc-wechat-submit").click(function(){
            $("[data-area=content]").each(function(){
                var id = $(this).attr("data-id");
                if(id){
                    $(this).val(layedit.getContent(id))
                }
            })
            return true;
        })
        
        initData();
        form.render();
        // createArticle();
        $("[data-area=content]").each(function(){
            var editId=layedit.build($(this),{
                uploadImage:{
                    url:"/admin/upload/wechatFile?type=article",
                    type:"post"
                }
            });
            $(this).attr("data-id",editId);
        })

        function initData(){
            
            $(document).on("click","[data-news=openNews]",function(){
                    var parentLayer=parent.layer;
                    var $this=$(this);
                    parentLayer.open({
                    title: '图片列表',
                    type:2,
                    area:['1024px', '600px'],
                    content: '/admin/wechatArticle/images',
                    btn:["确定","取消"],
                    yes:function(index,layero){
                        var selected=layero.find("iframe").contents().find("[data-selected=true]")
                        var id=selected.attr("data-id");
                        var path=selected.attr("data-path");
                        // var title=selected.attr("data-title");
                        // $("#imageTitle").text(title);
                        var parent=$this.parents("[data-tab-content=item]");
                        if(parent){
                            var contentTab=$("#tabs li").eq(parent.index())
                            if(contentTab){
                                var coverImage=contentTab.find("[data-image=cover]");
                                var assetInput=parent.find("[data-input=assetId]");
                                var coverInput=parent.find("[data-input=cover]");
                                var mediaImage=parent.find("[data-input=mediaImage]");

                                if(coverImage) coverImage.attr("src",path);
                                if(assetInput) assetInput.val(id);
                                if(coverInput) coverInput.val(path);
                                if(mediaImage) mediaImage.val('');
                            }
                        }
                        parentLayer.close(index);
                    }
                }); 
            })

            $(document).on("change","[data-input=title]",function(){
                var index=$(this).parents("[data-tab-content=item]").index();
                var contentTab=$("#tabs li").eq(index)
                var value=$(this).val();
                if(contentTab){
                    var title=contentTab.find("[data-image=title]");
                    if(title) title.html(value);
                }
            })

            $(document).on("click","[data-click=remove]",function(){
                $this=$(this);
                layer.confirm("是否要删除图文"
                    ,{
                        btn:["确定",'取消']
                    },
                    function(index,layero){
                        var parent=$this.parents("li");
                        $("#tab-content [data-tab-content=item]").eq(parent.index()).remove();
                        parent.remove();
                        activeListLast();
                        layer.close(index);
                    }
                )
            })

            $(document).on("click","#tabs li",function(){
                $("#tabs li").removeClass("list-active");
                $(this).addClass("list-active");
            })

            //监听指定开关
            form.on('switch(switchUrl)', function(data){
                this.value=this.checked?1:0;
            });

            $("#tabs li:first").click();
        }

        form.verify({
            cover:function(value,item){
                if(!value || value=="" || value.length==0){
                    return "请选择封面";
                }
            },
            url:function(value,item){
                if(!value ||value=="" || value.length==0){
                    return;
                }
            },
            content:function(value,item){
                if(!value || value=="" || value.length==0){
                    return "正文不能为空";
                }
            }
        })
       
    });
</script>